<template>
  <div class="background">
    <div style="min-height: 430px; background-color: white">
      <div class="tab" v-for="(userComment, index) in pageData" :key="index">
        <div class="tab1">
          <span
            >状态：{{
              userComment.checkStatus == 0 ? "未审核" : "已审核"
            }}</span
          >
          <span style="margin-left: auto"
            >评论时间：{{ userComment.publishTime }}</span
          >
        </div>
        <div class="tab2">
          <span>我评论了</span>
          <span style="font-weight: bold">{{ userComment.nickname }}</span>
          <span>的帖子</span>
          <span style="font-weight: bold"
            ><router-link
              :to="{
                path: '/Home/Topic',
                query: { data: userComment.tId },
              }"
              >{{ userComment.title }}</router-link
            ></span
          >
          <span
            >[<router-link
              :to="{
                path: '/Home/Specific',
                query: { type: userComment.type },
              }"
              >{{
                userComment.type == 0
                  ? "日常"
                  : userComment.type == 1
                  ? "知识"
                  : userComment.type == 2
                  ? "提问"
                  : userComment.type == 3
                  ? "求助"
                  : "交友"
              }}</router-link
            >]</span
          >
        </div>
      </div>

      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="userCommentList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    // 计算当前表格中的数据
    pageData() {
      return this.userCommentList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  data() {
    return {
      pageSize: 5, // 页数
      currentPage: 1, // 当前页
      userCommentList: [],
    };
  },
  methods: {
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getUserCommentList() {
      var _this = this;
      let uId = JSON.parse(sessionStorage.getItem("user")).uId;
      $.ajax({
        type: "get",
        data: { uId },
        url: "http://localhost:8080/forum/user/commentlist",
        dataType: "json",
        success: function (response) {
          console.log("userCommentList", response);
          _this.userCommentList = response;
        },
      });
    },
  },
  mounted() {
    this.getUserCommentList();
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #6699cc;
}
a:hover {
  text-decoration: underline;
}
.background {
  width: 778px;
}
.tab {
  border: 1px solid #c2d5e3;
  margin: 10px 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.tab .tab1 {
  display: flex;

  background-color: #eff4fb;
  border-bottom: 1px dashed #ccc;
  padding: 7px 7px;
}
.tab .tab2 {
  text-align: left;
  padding: 7px 7px;
}
</style>